import React, { useContext, useState } from 'react'
import BackDrop from '../../Meals/UI/BackDrop/BackDrop'
import { Space } from 'antd'
import { DeleteOutlined } from '@ant-design/icons'
import classes from './CartDetails.module.css'
import CartContext from '../../../store/CartContext'
import Meal from '../../Meals/Meal/Meal'
import Confirm from '../../Meals/UI/Confirm/Confirm'

const CartDetails = () => {

    const ctx = useContext(CartContext)
    const [showConfirm, setShowConfirm] = useState(false)

    const showConfirmHandler = () => {
        setShowConfirm(true)
    }

    const cancelHandler = (e) => {
        e.stopPropagation()
        setShowConfirm(false)
    }
    const okHandler = () => {
        ctx.clearCart()
    }
    return (
        <BackDrop onClick={cancelHandler}>
            {showConfirm &&
                <Confirm
                    onCancel={cancelHandler}
                    onOk={okHandler}
                    ConfirmText={'确认清空购物车吗'} />}

            <div className={classes.CartDetails} onClick={e => e.stopPropagation()}>

                <header className={classes.Header}>
                    <h2 className={classes.Title}>餐品详情</h2>
                    <Space className={classes.Clear} onClick={showConfirmHandler}>
                        <DeleteOutlined />
                        <span>清空购物车</span>
                    </Space>
                </header>


                <div className={classes.MealList}>
                    {
                        ctx.items.map(item =>
                            <Meal noDesc key={item.id} meal={item} />
                        )
                    }
                </div>
            </div>
        </BackDrop>
    )
}

export default CartDetails